<template>
  <div id="app">
    <div class="detail-body">
      <div class="detail-body-left">
        <div class="detail-body-main">
          <div class="main-head" @click="toggleMainBody">
            <el-icon><ArrowDown /></el-icon>
            <div style="margin-left: 8px">基本信息</div>
          </div>
          <div
            :class="{ 'main-body': isToggleMainBody }"
            v-if="isToggleMainBody"
          >
            <el-form
              :label-position="right"
              class="el-form--flex"
              :model="data"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>线索名称</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.leadsName">
                      <div class="item-value-text">
                        <span>{{ data.leadsName }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('leadsName')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.leadsName">
                      <el-input
                        style="width: 100%"
                        v-model="leadsData.leadsName"
                      />
                      <div class="handle-edit">
                        <el-button
                          :icon="Check"
                          class="handle-edit-btn"
                          @click="handleData"
                        />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('leadsName')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>线索来源</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.leadsSource">
                      <div class="item-value-text">
                        <span>{{ handleLeadsSource() }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('leadsSource')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.leadsSource">
                      <el-select v-model="leadsData.leadsSource">
                        <template
                          v-for="item in leadsSourceList"
                          :key="item.value"
                        >
                          <el-option :label="item.label" :value="item.value" />
                        </template>
                      </el-select>
                      <div class="handle-edit">
                        <el-button :icon="Check" class="handle-edit-btn" />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('leadsSource')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>手机</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.phone">
                      <div class="item-value-text">
                        <span>{{ data.phone }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('phone')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.phone">
                      <el-input style="width: 100%" v-model="leadsData.phone" />
                      <div class="handle-edit">
                        <el-button :icon="Check" class="handle-edit-btn" />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('phone')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>电话</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.telephone">
                      <div class="item-value-text">
                        <span>{{ data.telephone }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('telephone')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.telephone">
                      <el-input
                        style="width: 100%"
                        v-model="leadsData.telephone"
                      />
                      <div class="handle-edit">
                        <el-button :icon="Check" class="handle-edit-btn" />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('telephone')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>邮箱</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.email">
                      <div class="item-value-text">
                        <span>{{ data.email }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('email')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.email">
                      <el-input style="width: 100%" v-model="leadsData.email" />
                      <div class="handle-edit">
                        <el-button :icon="Check" class="handle-edit-btn" />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('email')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>地址</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.address">
                      <div class="item-value-text">
                        <span>{{ data.address }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('address')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.address">
                      <AddressSelect
                        v-model="leadsData.address"
                        :width="'494px'"
                      />
                      <div class="handle-edit">
                        <el-button :icon="Check" class="handle-edit-btn" />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('address')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>客户行业</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.customerField">
                      <div class="item-value-text">
                        <span>{{ handleCustomerField() }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('customerField')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.customerField">
                      <el-select v-model="leadsData.customerField">
                        <template
                          v-for="item in industryList"
                          :key="item.value"
                        >
                          <el-option :label="item.label" :value="item.value" />
                        </template>
                      </el-select>
                      <div class="handle-edit">
                        <el-button :icon="Check" class="handle-edit-btn" />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('customerField')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>客户级别</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.customerLevel">
                      <div class="item-value-text">
                        <span>{{ handleCustomerLevel() }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('customerLevel')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.customerLevel">
                      <el-select v-model="leadsData.customerLevel">
                        <template
                          v-for="item in customerLevelList"
                          :key="item.value"
                        >
                          <el-option :label="item.label" :value="item.value" />
                        </template>
                      </el-select>
                      <div class="handle-edit">
                        <el-button :icon="Check" class="handle-edit-btn" />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('customerLevel')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>下次联系时间</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.nextTime">
                      <div class="item-value-text">
                        <span>{{ data.nextTime }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('nextTime')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.nextTime">
                      <el-date-picker
                        class="custom-date-picker"
                        type="datetime"
                        v-model="leadsData.nextTime"
                        style="width: 100%"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                      />
                      <div class="handle-edit">
                        <el-button :icon="Check" class="handle-edit-btn" />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('nextTime')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>备注</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.remarks">
                      <div class="item-value-text">
                        <span>{{ data.remarks }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('remarks')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.remarks">
                      <el-input
                        style="width: 100%"
                        type="textarea"
                        v-model="leadsData.remarks"
                      />
                      <div class="handle-edit">
                        <el-button :icon="Check" class="handle-edit-btn" />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('remarks')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item :label-position="right">
                    <template #label>
                      <div style="width: 100px">
                        <span>自定义标签</span>
                      </div>
                    </template>
                    <div class="item-value" v-if="!isEdit.customerLabel">
                      <div class="item-value-text">
                        <span>{{ leadsData.customerLabel }}</span>
                      </div>
                      <el-icon :size="28" @click="toggleEdit('customerLabel')">
                        <editIcon />
                      </el-icon>
                    </div>
                    <div class="edit-wrap" v-if="isEdit.customerLabel">
                      <el-input
                        style="width: 100%"
                        v-model="leadsData.customerLabel"
                      />
                      <div class="handle-edit">
                        <el-button :icon="Check" class="handle-edit-btn" />
                        <el-button
                          :icon="Close"
                          class="handle-edit-btn"
                          @click="closeEdit('customerLabel')"
                        />
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div style="width: 609px"></div>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <LeadsSystemInfo :data="data" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { ArrowDown, Check, Close } from '@element-plus/icons-vue'
import editIcon from '@/assets/font/editIcon.vue'
import LeadsSystemInfo from './LeadsSystemInfo.vue'
import AddressSelect from '@/components/form/AddressSelect.vue'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})
console.log(props.data)
const isToggleMainBody = ref(true)
const isEdit = ref({
  leadsName: false,
  leadsSource: false,
  phone: false,
  telephone: false,
  email: false,
  address: false,
  customerField: false,
  customerLevel: false,
  nextTime: false,
  remarks: false,
  customerLabel: false,
})
const leadsData = ref(props.data)
const leadsSourceList = [
  {
    label: '促销',
    value: 1,
  },
  {
    label: '搜索引擎',
    value: 2,
  },
  {
    label: '广告',
    value: 3,
  },
  {
    label: '转介绍',
    value: 4,
  },
]
const customerLevelList = [
  {
    label: '重点客户',
    value: 1,
  },
  {
    label: '普通客户',
    value: 2,
  },
  {
    label: '非优先客户',
    value: 3,
  },
]
const industryList = [
  {
    label: 'IT',
    value: 1,
  },
  {
    label: '金融',
    value: 2,
  },
  {
    label: '电子商务',
    value: 3,
  },
  {
    label: '房地产',
    value: 4,
  },
]

function handleLeadsSource() {
  let leadsSource = props.data.leadsSource
  if (leadsSource == 1) {
    return '促销'
  } else if (leadsSource == 2) {
    return '搜索引擎'
  } else if (leadsSource == 3) {
    return '广告'
  } else if (leadsSource == 4) {
    return '转介绍'
  }
}

function handleCustomerField() {
  let customerField = props.data.customerField
  if (customerField == 1) {
    return 'IT'
  } else if (customerField == 2) {
    return '金融'
  } else if (customerField == 3) {
    return '电子商务'
  } else if (customerField == 4) {
    return '房地产'
  }
}

function handleCustomerLevel() {
  let customerLevel = props.data.customerLevel
  if (customerLevel == 1) {
    return '重点客户'
  } else if (customerLevel == 2) {
    return '普通用户'
  } else if (customerLevel == 3) {
    return '非优先客户'
  }
}

function toggleMainBody() {
  isToggleMainBody.value = !isToggleMainBody.value
}

function toggleEdit(field) {
  for (let item in isEdit.value) {
    isEdit.value[item] = false
  }
  isEdit.value[field] = true
}
function closeEdit(field) {
  isEdit.value[field] = false
}
</script>
<style scoped>
.detail-body {
  display: flex;
}

.detail-body-left {
  flex: 1;
  min-width: 20px;
  width: 0;
}

.detail-body-main {
  height: auto;
  margin: 16px 8px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 8px #172b4d1a;
  overflow: hidden;
}

.main-head {
  display: flex;
  padding: 16px;
  background-color: #fafbfc;
  align-items: center;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.el-form--flex.el-form {
  margin: 16px 0 0;
}

.item-value {
  align-items: center;
  width: 480px;
  display: flex;
  line-height: 32px;
  justify-content: space-between;
  background-color: #ebecf0;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  min-height: 32px;
  padding: 0px 6px;
}

.edit-wrap {
  align-items: center;
  display: flex;
  width: 494px;
  line-height: 32px;
  position: relative;
  min-height: 32px;
}

.handle-edit {
  display: flex;
  flex-shrink: 0;
  margin-top: 6px;
  position: absolute;
  right: 0;
  top: 94%;
  z-index: 999;
}

.item-value .el-icon {
  opacity: 0;
  transition: opacity 0.2s;
}

.item-value:hover .el-icon {
  opacity: 1;
}

.handle-edit-btn {
  width: 0;
  height: 0;
  padding: 15px;
}

:deep(.el-form--flex .el-form-item .el-form-item__label) {
  color: #42526e;
  height: auto;
  line-height: 1.2 !important;
  min-height: 32px;
  padding-top: 8px;
  text-align: right;
}
</style>
